@use "../../../common/styles/variables";

.PWGx-pipeline-connector {
  stroke: variables.$graph-connector-grey;
}

.PWGx-pipeline-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  z-index: 0;

  &::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: var(--card-background);
    border-radius: 50%;
    z-index: -1;
  }

  &--selected {
    &::after {
      box-shadow:
        0 0 0 0.125rem currentColor,
        0 0 0 0.5rem var(--card-background) !important;
    }
  }

  // The selected state looks rather odd for running jobs, so apply custom styling to make it look better
  &--running.PWGx-pipeline-node--selected {
    &::after {
      inset: 0;
      box-shadow:
        0 0 0 0.125rem color-mix(in srgb, currentColor, transparent),
        0 0 0 0.5rem var(--card-background) !important;
    }
  }

  &:has(a) {
    &::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      z-index: -1;
      transition: var(--standard-transition);
      box-shadow: 0 0 0 0.5rem transparent;
    }

    &:focus-visible {
      outline: none;
    }

    &:hover {
      &::after {
        background: oklch(from var(--color) l c h / 0.1);
      }
    }

    &:active,
    &:focus {
      &::after {
        background: oklch(from var(--color) l c h / 0.15);
        box-shadow: 0 0 0 0.25rem oklch(from var(--color) l c h / 0.15);
      }
    }

    &:focus-visible {
      &::after {
        box-shadow: 0 0 0 0.2rem var(--text-color) !important;
      }
    }
  }

  a {
    position: absolute;
    inset: 0;
    background: transparent;
  }

  svg {
    width: 1.75rem;
    height: 1.75rem;
  }

  &:has(.PWGx-pipeline-node-terminal) {
    &::before {
      inset: 4px;
    }
  }
}

.PWGx-pipeline-node-counter {
  width: 1.25rem;
  border-radius: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-bold-weight);
  cursor: default;
  border: 2px solid variables.$graph-connector-grey;
  color: var(--text-color-secondary);

  &::before {
    display: none !important;
  }
}

.PWGx-pipeline-node-terminal {
  width: 10px;
  height: 10px;
  border: 2px solid variables.$graph-connector-grey;
  border-radius: 10px;

  &::before {
    display: none !important;
  }
}

.PWGx-pipeline-connector-skipped {
  stroke: variables.$graph-connector-grey;
  stroke-opacity: 0.25;
}

.PWGx-pipeline-small-label {
  font-size: 0.75rem;
  transition: translate var(--standard-transition);

  &--selected {
    translate: 0 2px;
  }
}

.PWGx-pipeline-big-label {
  font-weight: var(--font-bold-weight);
  font-size: 0.8125rem;
  transition: translate var(--standard-transition);
  -webkit-line-clamp: 1 !important;

  &--selected {
    translate: 0 -2px;
  }
}

.PWGx-pipeline-big-label.pgv-graph-node--synthetic {
  font-style: italic;
}

.PWGx-pipeline-big-label.pgv-graph-node--skeleton {
  color: var(--text-color-secondary);
  font-weight: normal;
}
